<template>
	<view>
		<view class="TopBox">
			<view class="oneBox">

			</view> 
			<view class="ImageBox">
				<view class="image"> 
					<image src="https://jkht.wteam.club/file/icon/Billiards.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="twoBox">
				<view class="info">
					<!-- <view class="left" @click="turnToMoney">
						<text>909</text>
						<text>余额</text>
					</view> -->
					<view class="right">
					<!-- 	<text>4</text>
						<text>门店</text> -->
					</view>
				</view>
				<view class="info2">
					<view class="details">
						<text>桌球老板</text> 
						<text>店主</text>
					</view>
				</view>
			</view>
		</view>
		<view class="MyStoreBox">
			<view class="index1">
				<text>我的门店:</text>
				<text>{{length}}家</text>
			</view>
			<view class="list" v-for="(add,index) in dataList">
				<view class="index">
					<text>{{index+1}}</text>
				</view>
				<view class="image">
					<image :src="add.imageUrl" mode="scaleToFill"></image>
				</view>
				<view class="info">
					<view class="one">
						<text>{{add.name}}</text>
						
						<text>{{add.phone}}</text>
					</view>
					<view class="address">						
						<text >地址:{{add.address}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="LoginOutBox">
			<view class="btn" @click="LoginOut">
				<text>退出登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[],
				length:'',
			};
		},
		onShow() {
			this.getList()
		},
		methods:{
			// turnToMoney(){
			// 	uni.navigateTo({
			// 		url: "/subpkg/package/package"
			// 	})
			// },
			async LoginOut(){		
				const {
					data: res
				} = await uni.$http.get(`/business/logout`);
				if (res.code !== 0) return uni.$showMsg(res.message);			
				console.log(res.data, '退出登录!');
				uni.$showMsg('退出成功!');				
				// uni.removeStorageSync('token')
				uni.removeStorage('token')
				setTimeout(()=>{
					uni.navigateTo({
						url:'/subpkg/Login/Login'
					})				
				},2000) 
			}, 
			async getList(){
				let data = {					
					storeId: uni.getStorageSync('storeId'),
				}
				const {
					data: res
				} = await uni.$http.post(`/store/storeQuery`);
				if (res.code !== 0) return uni.$showMsg(res.message);
				console.log(res.data, '门店列表');
				this.dataList=res.data;
				uni.setStorageSync("MenDianList",res.data)
				this.length=this.dataList.length
			}
		}
	}
</script>

<style lang="scss">
	.LoginOutBox{
		margin-top: 2vh;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 6vh;
			width: 40vw;
			font-weight: 700;
			border-radius: 20rpx;
			background-color: #ff0000;
			color:#fff;
			font-size: 30rpx;			
		}
	}
	.MyStoreBox {
		margin-top: 1vh;
		background-color: #f8fbfd;
		height: 60vh;
		width: 100%;
		overflow-y: auto;

		.index1 {
			color: #2a82e4;
			height: 5vh;
			display: flex;
			align-items: center;
			margin-left: 5vw;
			text:nth-child(2){
				margin-left: 3vw;
			}
		}

		.list {
			margin-top: 1vh;
			display: flex;
			align-items: center;
			// justify-content: center;
			background-color: #fff;
			padding: 1vh;
			height: 15vh;
			// width: 100%;
			.index {
				width: 10vw;
				height: 100%;
				font-size: 33rpx;
				font-weight: 700;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.image {
				width: 26vw;
				height: 14vh;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				width: 55vw;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				// align-items: center;
				.one{
					height: 30%;
					width: 55vw;
					display: flex;					
					justify-content: space-around;
					align-items: center;
					text:nth-child(1){
						font-size: 28rpx;
						font-weight: 700;
						margin-left: 3vw;
					}
					text:nth-child(2){
						font-size: 25rpx;
						color: #a1a1a1;
						margin-left: 5vw;
					}
				}
				.address{
					height:30%;
					max-width: 55vw;
					font-size: 27rpx;
					margin-left: 5vw;
					// flex-wrap: wrap;					
					white-space: normal;
					word-break: break-all;
					word-wrap: break-word;
			
				}
			}
		}
	}

	.TopBox {
		width: 100%;
		height: 30vh;
		position: relative;

		.ImageBox {
			width: 30vw;
			height: 30vw;
			border-radius: 50%;
			position: absolute;
			border: 10rpx solid #fff;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);

			.image {
				width: 100%;
				height: 100%;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}

		.oneBox {
			width: 100%;
			height: 10vh;
			background-color: #2a82e4;
		}

		.twoBox {
			width: 100%;
			height: 20vh;
			background-color: #fff;

			.info {
				display: flex;
				justify-content: space-around;
				align-items: center;

				.left,
				.right {
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					margin-top: 2vh;
					font-size: 27rpx;
					font-weight: 700;
				}
			}

			.info2 {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 10vh;

				.details {
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;

					text:nth-child(2) {
						font-size: 27rpx;
					}

					text:nth-child(1) {
						font-weight: 700;
					}
				}
			}
		}
	}
</style>